<script setup lang="ts">
import { OLink, OIcon } from '@opensig/opendesign';
import IconOutlink from '~icons/app/icon-outlink.svg';
import { GITCODE_URL } from '@/config/url-config';
</script>

<template>
  <div class="header-code">
    <OLink :href="GITCODE_URL" target="_blank" class="code" rel="noopener noreferrer">
      <span>代码仓</span>
      <OIcon>
        <IconOutlink />
      </OIcon>
    </OLink>
  </div>
</template>

<style lang="scss" scoped>
.header-code {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 16px;

  .o-icon {
    --icon-size: 16px;
    margin-left: 4px;
  }

  :deep(.o-icon) {
    path {
      fill: currentColor;
      stroke: transparent;
    }

    path[fill='none'] {
      display: none;
    }
  }

  :deep(.code) {
    .o-link-main {
      display: flex;
      align-items: center;

      @include hover {
        color: var(--o-color-ubmc);
      }
    }
  }
}
</style>
